<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Melagrano, магазин ювелирных украшений</title>
    <!-- Bootstrap -->

    <script src="jquery-1.8.3.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/bootstrap.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <script src="underscore.js"></script>
    <script src="json2.js"></script>
    <script src="backbone.js"></script>
    <script src="backbone-relational.js"></script>

    <script src="jquery.cookie.js"></script>
    <script src="cookie.js"></script>

    <script src="BreadCrumbsRenderer.js"></script>
    <script src="basket.js"></script>
    <script src="GallaryBuilder.js"></script>
    <script src="BasketBuilder.js"></script>

    <script src="SiteRoutes.js"></script>


    <!-- Gallery Scripts -->
    <script src="js/galleryLib/jquery.ad-gallery.js"></script>
    <link href="js/galleryLib/jquery.ad-gallery.css" rel="stylesheet" media="screen">


    <!-- Add jQuery library -->


    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="/backbone/js/fancyBox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="/backbone/js/fancyBox/source/jquery.fancybox.js?v=2.1.3"></script>
    <link rel="stylesheet" type="text/css" href="/backbone/js/fancyBox/source/jquery.fancybox.css?v=2.1.2"
          media="screen"/>

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css"
          href="/backbone/js/fancyBox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5"/>
    <script type="text/javascript"
            src="/backbone/js/fancyBox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css"
          href="/backbone/js/fancyBox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7"/>
    <script type="text/javascript"
            src="/backbone/js/fancyBox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="/backbone/js/fancyBox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>


    <script type="text/javascript" src="/backbone/js/bootstrap-notify.js"></script>
    <link rel="stylesheet" type="text/css"
          href="/backbone/css/bootstrap-notify.css"/>


    <style>
        body {
            background-color: #333;
        }

    </style>


    <script src="http://threedubmedia.googlecode.com/files/jquery.event.drag-2.0.min.js"></script>
    <script src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.min.js"></script>
    <script src="http://remysharp.com/demo/mousehold.js"></script>
    <script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>

    <!--<script src="js/aplweb.scrollbars.js"></script>-->


    <link rel="stylesheet" href="css/jquery.scrollbars.css">

    <script type="text/javascript" src="js/jquery.scrollbars.js"></script>

    <link rel="stylesheet" href="/backbone/css/jquery-ui.css"/>
    <!--<script src="http://code.jquery.com/jquery-1.8.3.js"></script>-->
    <script src="/backbone/js/jquery-ui-1.9.2.custom.min.js"></script>

    <style type="text/css">
        .con1 {
            width: 200px;
            height: 200px;
            overflow: scroll;
        }

        .con2 {
            width: 200px;
            height: 200px;
            overflow: scroll;
        }

        div.scrollElement.drag {
            background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.62) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.22)), color-stop(100%, rgba(0, 0, 0, 0.62))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.62) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.62) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.62) 100%); /* IE10+ */
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.62) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#38000000', endColorstr = '#9e000000', GradientType = 0);

            /* IE6-9 */
    </style>


</head>
<body class="gradient">

<div class="container shadow">


    <div class=" container backgroundTexture" style="height: 100%">


        <div class="row-fluid">
            <div class="span12" style="margin-top: 2%;margin-bottom: 2%">
                <div align="center" class="span4" >
                    <img align="left" style="margin-left: 15%" src="/backbone/images/textures/title.png"/>
                </div>
                <div align="center" class="offset4 span4" >
                    <img   style="margin-left: -15%"  src="/backbone/images/textures/contact.png"
                            />
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container" style="height: 100px; background-color: #5f000e">
    <div class="row-fluid">
        <div class="span12">
            <img src="/backbone/images/textures/banner.png">
        </div>
    </div>
</div>

<div id="reqForm" class="container modal hide fade in" style="height: 100px !important; background-color: #5f000e">
    <div class="row-fluid">
        <div class="span12">
            <a class="close" data-dismiss="modal">×</a>
            <img src="/backbone/images/textures/banner.png">

            <h3>Форма оформления заявки</h3>
        </div>
    </div>
</div>

<!--<div  class="modal hide fade in"  style="height:500px; display: none; ">-->
<!--<div class="modal-header">-->
<!--<a class="close" data-dismiss="modal">×</a>-->
<!--<h3>Форма оформления заявки</h3>-->
<!--</div>-->
<!--</div>-->

<div class="container backgroundTexture">
    <div class="row-fluid">
        <div class="span12 menu-gradient">
            <div class="navbar">
                <!--<div class="navbar-inner menu-gradient">-->
                <ul class="nav " style=" margin-left: 5%">
                    <li ><a  href="test.html#photos/5/0">Каталог</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="test.html#delivery">Доставка</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="test.html#contacts">Контакты</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="test.html#basket">Корзина</a></li>
                </ul>
                <form  class="navbar-search pull-right">
                    <div   style='margin-left: -55%;' style="position: relative;">
                        <!--<i class="icon-search" style="position: absolute; top: 0.5em;left: 1px;"></i>-->
                        <input type="text" class="span8 search-query"
                               style="color: white; background-color: #5b0f1a; padding-left: 28px; line-height: 19px;"
                               placeholder="Поиск" autocomplete="off" spellcheck="false" x-webkit-speech=""
                               x-webkit-grammar="builtin:search" lang="ru">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container backgroundTexture">
    <div class="row-fluid">
        <div class="span8" style="margin-top: 2%">
            <div style="margin-left:7.5%;text-align: left">
                <ul class="breadcrumb" style="margin-bottom: 0">

                </ul>
                <hr style="border-color: #000000;border-bottom-width: 0px; margin-top: 0px"/>
            </div>

            <div id="galleryContainer" style="margin-top: 2%;margin-left: 7.5%; min-height: 650px">

            </div>
        </div>

        <div class="span4" id="menu">


        </div>
    </div>

</div>

<div class="container backgroundTexture">
    <div class="span8">
        <div class="pagination pagination-centered">
            <ul id="galleryCounter">
            </ul>
        </div>
    </div>

</div>
<footer>
    <div class="container" style="height: 100px; background-color: #5f000e">

    </div>
</footer>

<div class='notifications top-left'></div>

</div>


</body>
</html>

<script type="text/template" id="breadCrumbTemplate">
    <% for(var i=0; i
    <items.length
    ; ++i){ console.log(items.length) %>
    <% if(i!=(items.length-1)) { %>
    <li><a style="color:#545256 !important;" href="<%= items[i].link %>"><%= items[i].name %></a> <span class="divider">></span>
    </li>


    <% }else{%>
    <li class="active"><%= items[i].name %></li>
    <% }%>
    <% }%>

</script>

<script type="text/template" id="galcounter">
    <li><a class="<%= itemClass %>" style="font-family: NumberFont; font-size:30px; line-height:32px; "
           href="test.html#/photos/<%= onPage %>/<%= page %>"><%= count %></a></li>
</script>


<script type="text/template" id="ad-gallery">
    <div class="row" style="margin:  20px 0px 0px  35px;  min-height:450px">
        <div class="span4">
            <div class="ad-gallery">
                <div class="ad-image-wrapper">
                </div>
                <div class="ad-nav">
                    <div class="ad-thumbs">
                        <ul class="ad-thumb-list">
                            <% for(var i=0; i
                            <photos.length
                            ; ++i){ console.log(photos.length) %>
                            <li>
                                <a href="/backbone/images/mini/<%= photos[i]%>.jpg">
                                    <img src="/backbone/images/mini/<%= photos[i]%>.jpg">
                                </a>
                            </li>
                            <% }%>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="span3">
            <%= name%>
        </div>

    </div>
    <div class="row" style="margin:  20px 0px 0px  35px;">
        <hr class="span5" style="border-color: #000000;border-bottom-width: 0px;display:inline-block;"/>
        <div class="span2" style="position:relative;top:0.9em; display:inline-block;">Вас так же заинтересует</div>
        <hr class="span5" style="border-color: #000000;border-bottom-width: 0px;display:inline-block"/>
    </div>


    <!--<hr style="border-color: #000000;border-bottom-width: 0px; margin-top: 0px"> Вас так же заинтересует</hr>-->
    <div class="row">
        <div class="span8">
            до фига картинок
        </div>
    </div>


</script>


<script type="text/template" id="basketItemTemplate">
    <div class="row-fluid" style="margin-bottom:20px">
        <img class="span2" src="images/mini/<%= name %>.jpg" alt="">

        <div class="span4">
            Описание и прочие параметры
        </div>
        <div class="span2">

            <select class="span8 selectpicker">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
            шт.
        </div>

        <div class="span2" align="center">
            <%= price %>
        </div>
        <div class="span2" align="center">
            <!--<button > Убрать из корзины</button>-->
            <img style="height:25px" onclick="removeFromBasket('<%= id %>');"
                 src="http://a.dryicons.com/images/icon_sets/stylistica_icons_set/png/128x128/delete.png"/>
        </div>
    </div>
</script>

        <script type="text/javascript">

            </script>


<script type="text/template" id="item-template">
    <li style="display:none; text-align:center;" class="span3">
        <a href="#itemInfo/<%= Article %>">
            <!--<a class="thumbnail" href="#">-->
            <!--<div class="thumbnail">-->
            <img src="/backbone/images/mini/<%= name %>.jpg" alt="">
            <!--</div>-->
        </a>
        <!--<h4 style="margin-top:2px; display:inline-block">2500 |</h4>&ndash;&gt;-->
        <button class="btn-link" href="#" onclick="putToBasket('<%= Article %>', <%= price %>);"
                style="height:25 px; color:black;  font-size=20px !important; margin-top:2px; display:inline-block"><%=
            price %> руб. | В корзину
        </button>

    </li>
</script>


<script type="text/template" id="menu-template">
    <!--<div class="row" style="height:25px; width:100px; background-size: 100%; background: url(/backbone/images/textures/1.png) " ></div>-->
    <div style="margin-top:40px" class="row">
        <img onclick="onJewelClick(this);" src="/backbone/images/textures/jewelUn.png" width=200px>

        <div id="jewels" align="center">
            <div align="center">
                <div class="con1" style="background-color:#FFFFFF;display: inline-block" align="center">
                    <div align="left">
                        <% for(var i=0; i
                        <jewelType.length
                        ; ++i){ console.log(jewelType.length) %>
                        <input type="checkbox"><%= jewelType[i].Вставка %></br>
                        <% }%>
                        &nbsp;
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <img onclick="onStoneClick(this);" src="/backbone/images/textures/stoneUn.png" width=200px>

        <div id="stones" align="center">
            <div align="center">

                <div style="background-color:#FFFFFF; display: inline-block" class="con2" align="center">
                    <div align="left">
                        <% for(var i=0; i
                        <stone.length
                        ; ++i){ console.log(stone.length) %>
                        <input type="checkbox"><%= stone[i].Name %></br>
                        <% }%>
                        &nbsp;
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <img onclick="onPriceClick(this);" src="/backbone/images/textures/priceUn.png" width=200px>

        <div id="price" width=200px>
            <p>
                <label for="amount">Ценовой диапазон:</label>
                <input type="text" readonly id="amount"
                       style="width:200px !important;border: 0; color: #f6931f; font-weight: bold;"/>
            </p>

            <div id="slider-range"></div>
        </div>
    </div>

</script>

<script type="text/javascript">


    Backbone.emulateHTTP = true;
    Backbone.emulateJSON = true;


    var myGalleryRouter = new GalleryRouter();
    $(document).ready(function () {
        Backbone.history.start();


    });


    function buildItem(Article) {
        JewelItem = new Backbone.Model;
        JewelItem.urlRoot = '/backbone/itemInfo.php?Article=' + Article;
        JewelItem.el = $('#galleryContainer')[0];
        JewelItem.fetch({
            error:function () {
            },
            success:function () { // model is ready now
                console.log(JewelItem.attributes);


                var compiled_template = _.template($('#ad-gallery').html());
                JewelItem.el.innerHTML = compiled_template(JewelItem.toJSON());
                var galleries = $('.ad-gallery').adGallery({
                    loader_image:"/backbone/js/galleryLib/loader.gif",
                    width:150,
                    height:150,
                    update_window_hash:false,
                    enable_keyboard_move:true,
                    effect:'fade',
                    cycle:true,
                    thumbSize:10,
                    animation_speed:500
                });

                $('.ad-gallery').on("click", ".ad-image", function () {
                    $.fancybox.open({
                        href:$(this).find("img").attr("src"),
                        closeBtn:false,
                        closeClick:true,
                        openEffect:'elastic',
                        closeSpeed:150
                    })
                });
            }
        });
    }


    var menu = new Backbone.Model();
    menu.urlRoot = "/backbone/searchMenu.php";
    menu.fetch({
        error:function () {
        },
        success:function () { // model is ready now
            var compiled_template = _.template($('#menu-template').html());
            menuView = new MenuView();
            menuView.el = $('#menu')[0];
            menuView.el.innerHTML = compiled_template(menu.toJSON());
            $('.con1')[0].style.position = "absolute";
            $('.con1')[0].style.left = "-10000px";
            $('.con2')[0].style.position = "absolute";
            $('.con2')[0].style.left = "-10000px";

            $('.con1').scrollbars();
            $('.con2').scrollbars();

            $('.con1')[0].style.position = "relative";
            $('.con1')[0].style.left = "";
            $('.con2')[0].style.position = "relative";
            $('.con2')[0].style.left = "";

            $('#jewels')[0].style.display = "none";
            $('#stones')[0].style.display = "none";
            $('#price')[0].style.display = "none";

            $(function () {
                $("#slider-range").slider({
                    range:true,
                    step:500,
                    min:0,
                    max:25000,

                    values:[ 0, 25000 ],
                    slide:function (event, ui) {
                        $("#amount").val("" + ui.values[ 0 ] + "руб." + " - " + ui.values[ 1 ] + "руб.");
                    }
                });
                $("#amount").val("" + $("#slider-range").slider("values", 0) + "руб." +
                        " - $" + $("#slider-range").slider("values", 1) + "руб.");
            });

        }});

    var MenuView = Backbone.View.extend({

        render:function () {

        }
    });


    function onJewelClick(obj) {
        $('#jewels').slideToggle("slow");
        $(obj).toggleClass("on");

        if ($(obj).attr('class') == "on") {
            obj.src = "/backbone/images/textures/jewelOn.png";
        } else {
            obj.src = "/backbone/images/textures/jewelUn.png";
        }


    }

    function onStoneClick(obj) {
        $('#stones').slideToggle("slow");
        $(obj).toggleClass("on");

        if ($(obj).attr('class') == "on") {
            obj.src = "/backbone/images/textures/stoneOn.png";
        } else {
            obj.src = "/backbone/images/textures/stoneUn.png";
        }
    }

    function onPriceClick(obj) {
        $('#price').slideToggle("slow");
        $(obj).toggleClass("on");

        if ($(obj).attr('class') == "on") {
            obj.src = "/backbone/images/textures/priceOn.png";
        } else {
            obj.src = "/backbone/images/textures/priceUn.png";
        }
    }


</script>


<style>

        /*.modal {*/
        /*margin-right: 500px !important;*/
        /*margin: 0px !important;*/

        /*}*/

    .noSelect {
        user-select: none;
        -o-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
    }

        /*@media (min-width: 480px) {*/
        /*.span12, .container {*/
        /*width: 480px;*/
        /*}*/
        /*}*/

    @media (min-width: 1073px) {
        .span12, .container {
            width: 1073px;
        }
    }

    .row {
        text-align: center;

    }

    img {
        max-width: 100%;
    }

    .backgroundTexture {
        background-image: url('images/back.png');
        background-repeat: repeat;
        background-size: 50px;
    }

    .gradient {
        background: rgb(208, 228, 247); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(208, 228, 247, 1) 0%, rgba(115, 177, 231, 1) 24%, rgba(10, 119, 213, 1) 50%, rgba(83, 159, 225, 1) 79%, rgba(135, 188, 234, 1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(208, 228, 247, 1)), color-stop(24%, rgba(115, 177, 231, 1)), color-stop(50%, rgba(10, 119, 213, 1)), color-stop(79%, rgba(83, 159, 225, 1)), color-stop(100%, rgba(135, 188, 234, 1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(208, 228, 247, 1) 0%, rgba(115, 177, 231, 1) 24%, rgba(10, 119, 213, 1) 50%, rgba(83, 159, 225, 1) 79%, rgba(135, 188, 234, 1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(208, 228, 247, 1) 0%, rgba(115, 177, 231, 1) 24%, rgba(10, 119, 213, 1) 50%, rgba(83, 159, 225, 1) 79%, rgba(135, 188, 234, 1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(208, 228, 247, 1) 0%, rgba(115, 177, 231, 1) 24%, rgba(10, 119, 213, 1) 50%, rgba(83, 159, 225, 1) 79%, rgba(135, 188, 234, 1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(208, 228, 247, 1) 0%, rgba(115, 177, 231, 1) 24%, rgba(10, 119, 213, 1) 50%, rgba(83, 159, 225, 1) 79%, rgba(135, 188, 234, 1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#d0e4f7', endColorstr = '#87bcea', GradientType = 0); /* IE6-9 */
    }

    .shadow {
        /*background: #fc0; *//* Цвет фона */
        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Для Firefox */
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Для Safari и Chrome */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Параметры тени */
        /*padding: 10px;*/
    }

    .upShadow {
        /*background: #fc0; *//* Цвет фона */
        -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2); /* Для Firefox */
        -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2); /* Для Safari и Chrome */
        box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.2); /* Параметры тени */
        /*padding: 10px;*/
    }

    .menu-gradient {
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(253, 253, 253, 0.01) 2%, rgba(180, 180, 180, 0.17) 46%, rgba(130, 130, 130, 0.34) 98%, rgba(128, 128, 128, 0.17) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(2%, rgba(253, 253, 253, 0.01)), color-stop(46%, rgba(180, 180, 180, 0.17)), color-stop(98%, rgba(130, 130, 130, 0.34)), color-stop(100%, rgba(128, 128, 128, 0.17))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(253, 253, 253, 0.01) 2%, rgba(180, 180, 180, 0.17) 46%, rgba(130, 130, 130, 0.34) 98%, rgba(128, 128, 128, 0.17) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(253, 253, 253, 0.01) 2%, rgba(180, 180, 180, 0.17) 46%, rgba(130, 130, 130, 0.34) 98%, rgba(128, 128, 128, 0.17) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(253, 253, 253, 0.01) 2%, rgba(180, 180, 180, 0.17) 46%, rgba(130, 130, 130, 0.34) 98%, rgba(128, 128, 128, 0.17) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(253, 253, 253, 0.01) 2%, rgba(180, 180, 180, 0.17) 46%, rgba(130, 130, 130, 0.34) 98%, rgba(128, 128, 128, 0.17) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#00000000', endColorstr = '#2b808080', GradientType = 0); /* IE6-9 */
    }

    @font-face {
        font-family: "MyFont";
        src: url("/backbone/images/fonts/AvantGardeGothicC.otf");
    }

    @font-face {
        font-family: "NumberFont";
        src: url("/backbone/images/fonts/Roboto-Light.ttf");
    }

    div {
        font-family: "MyFont";
        /*text-transform: capitalize;*/
    }

    .pagination ul li a {
        background-color: #737476;
    }

    .activePage {
        text-decoration: underline !important;
    }

    .trans {

        height: 32px;
        background-color: transparent !important;
    }

    .ad-thumb-list li {
        width: 50px;
    }

    .ui-slider {
        width: 170px;
        margin-left: 100px;
    }

.spacer{
        margin-bottom: 50px;
        }

</style>
